<style lang="less">
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .grid-top {
    height: 160px;
    margin-top: 10px;
    background-color: #F0F0F0;
    .grid-top-img {
      float: left;
      margin-top: 20px;
      margin-left: 40px
    }
    .grid-top-ul {
      font-weight: 800;
      list-style-type: none;
      margin-bottom: 10px;
      font-size: large;
      margin-top: 20px;
      width: 150px;
      float: left;
      padding-left: 15px;
    }
    .grid-top-ul-li {
      margin-top: 5px;
      color: #F00;
    }
    .grid-top-button {
      float: left;
      margin-top: 0px;
      width: 100px;
      height: 32px;
    }
    .el-row {
      margin-bottom: 15px;
    }
  }

  .border-card {
    margin-top: 20px;
  }

</style>
<template>
  <section>
    <div class="grid-top">
      <el-row>
        <el-col :span="24">
          <div class="" style="">
            <img src="../../assets/newrmb.png" class="f-w20 f-h20 grid-top-img">
            <ul class="grid-top-ul">
              <li>账户余额</li>
              <li class="grid-top-ul-li"><span>{{fundMebAcct.fundMebAccData.avauseAmt}}</span> 元</li>
            </ul>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" size="large" class="grid-top-button" style="margin-left: 100px">充值</el-button>
          <el-button type="primary" size="large" class="grid-top-button" style="margin-left: 20px">提现</el-button>
        </el-col>
      </el-row>
    </div>
    <el-tabs type="border-card" height="500px" class="border-card">
      <el-tab-pane>
        <span slot="label">交易记录</span>
        <!--工具条-->
        <search-bar>
          <el-row>
            <el-col :span="6">
              <el-form-item label="订单编号 " :label-width="searchConditionLabelWidth">
                <el-input  style="min-width:30px;max-width: 220px" v-model="fundTFlow.conditions.platOrdId"
                          placeholder="请输入订单编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交易类型" :label-width="searchConditionLabelWidth">
                <el-select v-model="fundTFlow.conditions.transType" placeholder="请选择交易类型">
                  <el-option
                    v-for="item in $store.getters.TRANS_TYPE"
                    :key="item.dictVal"
                    :label="item.cnDictValname"
                    :value="item.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交易时间" :label-width="searchConditionLabelWidth">
                <el-date-picker
                  v-model="fundTFlow.conditions.transTime"
                  type="daterange"
                  align="right"
                  placeholder="选择日期范围"
                  :picker-options="pickerOptions2">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </search-bar>
        <!-- 搜索end -->
        <!-- 操作 -->
        <el-col :span="24" style="margin-bottom: 10px">
          <el-button type="primary" @click="resetTFlowCondition" style="float: right">重置</el-button>
          <el-button type="primary" @click="getFundTFlowData" style="float: right;margin-right: 10px">查询</el-button>
        </el-col>
        <!--操作end-->
        <!--列表-->
        <el-table :data="fundTFlow.fundTFlowData" highlight-current-row border @sort-change="sortTChange"
                  v-loading="listLoading" min-height="450" max-height="450">
          <el-table-column type="index" width="80" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="orderNumber" label="订单编号" width="290" align="center">
          </el-table-column>
          <el-table-column prop="createDate" label="交易时间" width="180"  align="center">
          </el-table-column>
          <el-table-column prop="transTypeName" label="交易类型" width="120"  align="center"
                           :formatter="transTypeFormatter">
          </el-table-column>
          <el-table-column prop="serialNo" label="交易流水" width="300" align="center">
          </el-table-column>
          <el-table-column prop="transAmt" label="交易金额" width="130"  align="right">
          </el-table-column>
          <el-table-column prop="cargoName" label="货物名称" width="200" align="center">
          </el-table-column>
          <el-table-column prop="amount" label="件数" width="100" align="center">
          </el-table-column>
          <el-table-column prop="volume" label="体积" width="100" align="center">
          </el-table-column>
          <el-table-column prop="weight" label="重量" width="100" align="center">
          </el-table-column>
        </el-table>
        <!--列表工具条-->
        <el-col :span="24" class="toolbar">
          <el-pagination
            :current-page="fundTFlow.currentPage"
            :page-size="fundTFlow.pageSize"
            @size-change="handleTSizeChange"
            @current-change="handleTCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :total="fundTFlow.total" style="float: right">
          </el-pagination>
        </el-col>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">充值记录</span>
        <!--工具条-->
        <search-bar>
          <el-row>
            <el-col :span="6">
              <el-form-item label="交易流水" :label-width="searchConditionLabelWidth">
                <el-input  style="min-width:30px;max-width: 220px" v-model="fundRFlow.conditions.serialNo"
                          placeholder="请输入交易流水"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="充值时间" :label-width="searchConditionLabelWidth">
                <el-date-picker
                  v-model="fundRFlow.conditions.rechargeTime"
                  type="daterange"
                  align="right"
                  placeholder="选择日期范围"
                  :picker-options="pickerOptions2">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </search-bar>
        <!-- 搜索end -->
        <!-- 操作 -->
        <el-col :span="24" style="margin-bottom: 10px">
          <el-button type="primary" @click="resetRFlowCondition" style="float: right">重置</el-button>
          <el-button type="primary" @click="getFundRFlowData" style="float: right;margin-right: 10px">查询</el-button>
        </el-col>
        <!--操作end-->
        <!--列表-->
        <el-table :data="fundRFlow.fundRFlowData" highlight-current-row border @sort-change="sortRChange"
                  v-loading="listLoading" style="width: 100%;">
          <el-table-column type="index" width="100" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="serialNo" label="交易流水" width="320" align="center">
          </el-table-column>
          <el-table-column prop="rechargedate" label="充值时间" width="250"  align="center">
          </el-table-column>
          <el-table-column prop="rcvdate" label="到账时间" width="250"  align="center">
          </el-table-column>
          <el-table-column prop="rcvamt" label="到账金额（元）" width="250" align="right" header-align="center">
          </el-table-column>
        </el-table>
        <!--列表工具条-->
        <el-col :span="24" class="toolbar">
          <el-pagination
            :current-page="fundRFlow.currentPage"
            :page-size="fundRFlow.pageSize"
            @size-change="handleRSizeChange"
            @current-change="handleRCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :total="fundRFlow.total" style="float: right">
          </el-pagination>
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>
<script>
import {
  getFundMebAcct,
  searchFundMebTFlow,
  searchFundMebRFlow
} from '../../api/meb-user/CapitalAccount';
import {isEmpty} from '../../lib/util';
export default{
  data () {
    return {
      // 账户交易记录模块***********
      fundTFlow: {
        conditions: {
          'transType': null,
          'platOrdId': null,
          'transTime': null
        },
        fundTFlowData: [],
        total: 30,
        currentPage: 1,
        pageSize: 10,
        sortProp: 'platOrdId',
        sortOrder: 'descending'
      },

      // 账户充值记录模块***********
      fundRFlow: {
        conditions: {
          'serialNo': null, // 流水号
          'rechargeTime': '' // 交易时间区间
        },
        fundRFlowData: [],
        total: 30,
        currentPage: 1,
        pageSize: 10,
        sortProp: 'serialNo',
        sortOrder: 'descending'
      },

      // 账户信息模块***************
      fundMebAcct: {
        fundMebAccData: {}
      },
      // 公用属性****************
      // 字典加载
      transTypeDict: this.$store.getters.TRANS_TYPE,
      listLoading: false,
      token: this.$store.state.token,
      userId: this.$store.state.userId,
      // 日期控件
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      searchConditionLabelWidth: '80px'
    };
  },
  methods: {
    //* ************************************账户信息模块***************
    getFundMebAcctInfo () {
      this.listLoading = false;
      getFundMebAcct(this.userId, this.token).then((res) => {
        if (res.data.successFlg === true) {
          this.fundMebAcct.fundMebAccData = res.data.obj;
        } else {
          this.$message.error('查询失败！');
        }
      }).catch(() => {
        this.$message.error('数据有误，查询失败！');
        this.listLoading = false;
      });
    },
    //* *************************************账户交易记录模块***********
    // 列表交易类型字典值转换成字典名
    transTypeFormatter (row, column) {
      for (let p in this.transTypeDict) {
        if (this.transTypeDict[p].dictVal === row.transType) {
          return this.transTypeDict[p].cnDictValname;
        }
      }
      return '';
    },
    // 交易记录查询条件重置
    resetTFlowCondition () {
      for (let p in this.fundTFlow.conditions) {
        this.fundTFlow.conditions[p] = '';
      }
    },
    // 交易记录加载列表数据
    getFundTFlowData () {
      let params = 'EQ_mebId=' + this.userId + ';';// 成员用户表的userId
      if (!isEmpty(this.fundTFlow.conditions.platOrdId)) {
        params += 'LIKE_platOrdId=' + this.fundTFlow.conditions.platOrdId + ';';
      }
      if (!isEmpty(this.fundTFlow.conditions.transType)) {
        params += 'EQ_transType=' + this.fundTFlow.conditions.transType + ';';
      }
      if (!isEmpty(this.fundTFlow.conditions.transTime) && this.fundTFlow.conditions.transTime.length > 0 && !isEmpty(this.fundTFlow.conditions.transTime[0])) {
        params += 'GTE_createDate=' + this.fundTFlow.conditions.transTime[0].toJSON() + ';';
        params += 'LTE_createDate=' + this.fundTFlow.conditions.transTime[1].toJSON() + ';';
      }
      this.listLoading = true;
      searchFundMebTFlow({
        token: this.token,
        page: this.fundTFlow.currentPage,
        size: this.fundTFlow.pageSize,
        filters: params,
        sorts: (this.fundTFlow.sortProp === null ? '' : (this.fundTFlow.sortOrder === 'ascending' ? '-' : '+') + this.fundTFlow.sortProp)
      }).then((res) => {
        this.listLoading = false;
        if (res.data.successFlg === true && res.data.detailModelList !== null) {
          if (res.data.detailModelList.length > 0) {
            this.fundTFlow.fundTFlowData = res.data.detailModelList;
            this.fundTFlow.currentPage = res.data.currPage;
            this.fundTFlow.total = res.data.totalCount;
            this.fundTFlow.pageSize = res.data.pageSize;
          } else {
            this.fundTFlow.fundTFlowData = [];
          }
        } else {
          this.$message.error('查询失败！');
        }
      }).catch(() => {
        this.$message.error('数据有误，查询失败！');
        this.listLoading = false;
      });
    },
    // 交易记录分页操作相关
    // 交易记录排序操作
    sortTChange (o) {
      this.fundTFlow.sortProp = o.prop;
      this.fundTFlow.sortOrder = o.order;
      this.getFundTFlowData();
    },
    // 交易记录每页几条操作
    handleTSizeChange (val) {
      this.fundTFlow.pageSize = val;
      this.getFundTFlowData();
    },
    // 交易记录第几页操作
    handleTCurrentChange (val) {
      this.fundTFlow.currentPage = val;
      this.getFundTFlowData();
    },

    //* ****************************************账户充值记录模块***********
    // 充值记录查询条件重置
    resetRFlowCondition () {
      for (let p in this.fundRFlow.conditions) {
        this.fundRFlow.conditions[p] = '';
      }
    },
    // 充值记录加载列表数据
    getFundRFlowData () {
      let params = 'mebId=' + this.userId + ';';// 资金账户管连得为成员用户表的userId
      if (!isEmpty(this.fundRFlow.conditions.serialNo)) {
        params += 'serialNo?' + this.fundRFlow.conditions.serialNo + ';';
      }
      if (!isEmpty(this.fundRFlow.conditions.rechargeTime) && this.fundRFlow.conditions.rechargeTime.length > 0 && !isEmpty(this.fundRFlow.conditions.rechargeTime[0])) {
        params += 'rechargedate>=' + this.fundRFlow.conditions.rechargeTime[0].toJSON() + ' g5;';
        params += 'rechargedate<=' + this.fundRFlow.conditions.rechargeTime[1].toJSON() + ' g6;';
      }
      this.listLoading = true;
      searchFundMebRFlow({
        token: this.token,
        page: this.fundRFlow.currentPage,
        size: this.fundRFlow.pageSize,
        filters: params,
        sorts: (this.fundRFlow.sortProp === null ? '' : (this.fundRFlow.sortOrder === 'ascending' ? '-' : '+') + this.fundRFlow.sortProp)
      }).then((res) => {
        this.listLoading = false;
        if (res.data.successFlg === true && res.data.detailModelList !== null) {
          if (res.data.detailModelList.length > 0) {
            this.fundRFlow.fundRFlowData = res.data.detailModelList;
            this.fundRFlow.currentPage = res.data.currPage;
            this.fundRFlow.total = res.data.totalCount;
            this.fundRFlow.pageSize = res.data.pageSize;
          } else {
            this.fundRFlow.fundRFlowData = res.data.detailModelList = [];
          }
        } else {
          this.$message.error('查询失败！');
        }
      }).catch(() => {
        this.$message.error('数据有误，查询失败！');
        this.listLoading = false;
      });
    },
    // 充值记录分页操作相关
    // 充值记录排序操作
    sortRChange (o) {
      this.fundRFlow.sortProp = o.prop;
      this.fundRFlow.sortOrder = o.order;
      this.getFundRFlowData();
    },
    // 充值记录每页几条操作
    handleRSizeChange (val) {
      this.fundRFlow.pageSize = val;
      this.getFundRFlowData();
    },
    // 充值记录第几页操作
    handleRCurrentChange (val) {
      this.fundRFlow.currentPage = val;
      this.getFundRFlowData();
    }
  },
  mounted () {
    this.getFundMebAcctInfo();
    this.getFundTFlowData();
    this.getFundRFlowData();
    this.$store.commit('initDict');
  }
};
</script>
